body,html,p, ul, li {
  padding: 0;
  margin: 0;
}
ul, li {
  list-style: none;
}

body {
  width: 100%;
  height: 100vh;
  background-image: url(./images/bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
}

/* @media (max-width: 960px) { */
  .head-img {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: gray;
    margin-top: 8.933333rem;
    margin: 8.746667rem auto 0;
    overflow: hidden;
  }
  .name {
    font-size:18px;
    font-weight:400;
    color:rgba(246,233,238,1);
    line-height:25px;
    text-align: center;
    margin-top: .24rem;
  }

  [data-dpr="2"] .name {
    font-size:36px;
    line-height: 50px;
  }
  [data-dpr="3"] .name {
    font-size:54px;
    line-height: 75px;
  }

  .id {
    font-size:14px;
    font-weight:400;
    color:rgba(246,233,238,1);
    margin-top: .16rem;
    text-align: center;
    line-height:14px;
  }

  [data-dpr="2"] .id {
    font-size:28px;
    line-height:28px;
  }

  [data-dpr="3"] .id {
    font-size:42px;
    line-height:42px;
  }

  .diamond-desc {
    font-size:15px;
    font-weight:400;
    color:rgba(246,233,238,1);
    margin-top: .64rem;
    text-align: center;
    line-height:21px;
  }

  [data-dpr="2"] .diamond-desc {
    font-size:30px;
    line-height:42px;
  }

  [data-dpr="3"] .diamond-desc {
    font-size:45px;
    line-height:63px;
  }

  .diamond {
    font-size:28px;
    font-weight:600;
    color:rgba(253,255,60,1);
    margin-top: .106667rem;
    text-align: center;
    line-height:28px;
  }

  [data-dpr="2"] .diamond {
    font-size:56px;
    line-height:56px;
  }

  [data-dpr="3"] .diamond {
    font-size:84px;
    line-height:84px;
  }  

  .btn {
    width:7.2rem;
    height:1.333333rem;
    background:linear-gradient(90deg,rgba(247,236,217,1) 0%,rgba(254,218,153,1) 100%);
    border-radius:.64rem;
    margin: 0 auto;
    font-size: 20px;
    line-height: 50px;
    font-weight: 500;
    color:rgba(191,20,25,1);
    text-align: center;
    margin-top: .96rem;
  }

  [data-dpr="2"] .btn {
    font-size:40px;
    line-height:100px;
  }

  [data-dpr="3"] .btn {
    font-size:60px;
    line-height:150px;
  }  

  .overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    background-color: rgba(0,0,0,0.7);
    visibility: hidden;
    z-index: 100;
  }
/* } */

.dialog {
  width: 7.2rem;
  height: 4rem;
  position: absolute;
  top: 6.88rem;
  left: 50%;
  margin-left: -3.6rem;
  background-color: rgba(255, 255, 255, 1);
  border-radius: .32rem;
  text-align: center;
  visibility: hidden;
  z-index: 101;
}
.dialog p:nth-child(1) {
  font-size:20px;
  font-weight:600;
  color:rgba(50,50,50,1);
  margin-top: .64rem;
}

[data-dpr="2"] .dialog p:nth-child(1) {
  font-size:40px;
}

[data-dpr="3"] .dialog p:nth-child(1) {
  font-size:60px;
}  

.dialog p:nth-child(2) {
  font-size:15px;
  font-weight:300;
  color:rgba(100,100,100,1);
  margin-top: .453333rem;
}

[data-dpr="2"] .dialog p:nth-child(2) {
  font-size:30px;
}

[data-dpr="3"] .dialog p:nth-child(2) {
  font-size:45px;
}  

.dialog div {
  width: 100%;
  height: 1.066667rem;
  border-top: .026667rem solid rgba(218,218,218,1);
  margin-top: .666667rem;

  font-size: 17px;
  font-weight: 500;
  color:rgba(10,200,150,1);
  line-height: 40px;
}

[data-dpr="2"] .dialog div {
  font-size:34px;
  line-height: 80px;
}

[data-dpr="3"] .dialog div {
  font-size:51px;
  line-height: 120px;
}  